<template>
  <transition
    :enter-active-class="enterActiveStyle"
    :leave-active-class="leaveActiveStyle"
    mode="out-in"
    appear
  >
    <div
      id="znxd-drag"
      :style="styleOption"
      v-show="dragFlag"
      v-drag="{ titleDrag, leftLimit, rightLimit, topLimit, bottomLimit }"
    >
      <slot name="header">
        <h3
          class="znxd-drag-header"
        >
          <span>{{ dragTitle }}</span>
        </h3>
      </slot>
      <div class="znxd-drag-content">
        <slot name="default"></slot>
      </div>
      <slot name="footer"></slot>
      <div
        class="znxd-drag-close"
        title="关闭"
        @click="closed"
        v-if="closeFlag"
      >
        <i class="el-icon-close"></i>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "znxd-drag",
  data() {
    return {};
  },
  directives: {
    drag: (e, b) => {
      var dragDom = b.value.titleDrag ? (e.firstElementChild || e.firstChild) : e;
      console.log(dragDom)
      dragDom.onmousedown = function (ev) {
        var disX = 0;
        var disY = 0;
        var oEvent = ev || event;
        var disX = oEvent.clientX - e.offsetLeft;
        var disY = oEvent.clientY - e.offsetTop;
        document.onmousemove = function (ev) {
          var oEvent = ev || event;
          var l = oEvent.clientX - disX;
          var t = oEvent.clientY - disY;
          if (l < b.value.leftLimit) {
            l = b.value.leftLimit;
          }
          if (l > b.value.rightLimit - e.offsetWidth) {
            l = b.value.rightLimit - e.offsetWidth;
          }
          if (t < b.value.topLimit) {
            t = b.value.topLimit;
          }
          if (t > b.value.bottomLimit - e.offsetHeight) {
            t = b.value.bottomLimit - e.offsetHeight;
          }
          e.style.left = l + "px";
          e.style.top = t + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
  },
  props: {
    width: {
      type: String,
      default: "400px",
    },
    height: {
      type: String,
      default: "300px",
    },
    dragTitle: {
      type: String,
      default: "这是一个标题",
    },
    initPositionX: {
      type: String,
      default: "20%",
    },
    initPositionY: {
      type: String,
      default: "20%",
    },
    dragFlag: {
      type: Boolean,
      default: true,
    },
    animateOpen: {
      type: Boolean,
      default: true,
    },
    titleDrag: {
      type: Boolean,
      default: true,
    },
    closeFlag: {
      type: Boolean,
      default: true,
    },
    boxShadow: {
      type: Boolean,
      default: false,
    },
    enterActiveName: {
      type: String,
      default: "animated tada",
    },
    leaveActiveName: {
      type: String,
      default: "animated bounceOutRight",
    },
    fixedOrAbsolute: {
      type: String,
      default: "fixed",
    },
    leftLimit: {
      type: Number,
      default: 0,
    },
    rightLimit: {
      type: Number,
      default: document.documentElement.clientWidth,
    },
    topLimit: {
      type: Number,
      default: 0,
    },
    bottomLimit: {
      type: Number,
      default: document.documentElement.clientHeight,
    },
  },
  computed: {
    enterActiveStyle() {
      if (this.animateOpen) {
        return this.enterActiveName;
      } else {
        return "";
      }
    },
    leaveActiveStyle() {
      if (this.animateOpen) {
        return this.leaveActiveName;
      } else {
        return "";
      }
    },
    styleOption() {
      let option = {
        width: this.width,
        height: this.height,
        position: this.fixedOrAbsolute,
        boxShadow: this.boxShadow ? "10px 10px 5px #888888" : "none",
        cursor: this.titleDrag ? "default" : "move",
        left: this.initPositionX,
        top: this.initPositionY,
      };
      return option;
    },
  },
  methods: {
    closed(event) {
      this.$emit("update:dragFlag", false);
      this.$emit("dragClosed", false, event);
    },
  },
};
</script>
<style lang="scss" scoped>
#znxd-drag {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  z-index: 999;
  .znxd-drag-header {
    font-size: 14px;
    color: #304455;
    margin: 0;
    padding: 0 15px;
    height: 36px;
    line-height: 36px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    cursor: move;
  }
  .znxd-drag-content {
    padding: 15px;
  }
  .znxd-drag-close {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
  }
}
</style>
